<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Gemp-LotR</title>

    <style type="text/css">
        body {
            font-size: 12px;
        }

        .ui-button-text-only .ui-button-text {
            font-size: 70%;
            padding: .2em .5em;
        }
    </style>

    <link rel="stylesheet" type="text/css" href="css/dark-hive/jquery-ui-1.8.16.custom.css">
    <link rel="stylesheet" type="text/css" href="css/jquery.contextMenu.css">
    <link rel="stylesheet" type="text/css" href="js/jquery/styles/jquery.spinnercontrol.css">

    <script type="text/javascript" src="js/jquery/jquery-1.6.2.js"></script>
    <script type="text/javascript" src="js/jquery/jquery-ui-1.8.16.custom.min.js"></script>
    <script type="text/javascript" src="js/jquery/jquery.cookie.js"></script>
    <script type="text/javascript" src="js/jquery/jquery.spinnercontrol.js"></script>
    <script type="text/javascript" src="js/jquery/jquery.layout.js"></script>
    <script type="text/javascript" src="js/jquery/jquery.touchSwipe.js"></script>

    <script type="text/javascript" src="js/gemp-019/inheritance.js"></script>
    <script type="text/javascript" src="js/gemp-019/common.js"></script>
    <script type="text/javascript" src="js/gemp-019/logging.js"></script>
    <script type="text/javascript" src="js/gemp-019/chat.js"></script>
    <script type="text/javascript" src="js/gemp-019/communication.js"></script>
    <script type="text/javascript" src="js/gemp-019/deliveryService.js"></script>
    <script type="text/javascript" src="js/gemp-019/commonUi.js"></script>
    <script type="text/javascript" src="js/gemp-019/cardFilter.js"></script>

    <script type="text/javascript" src="js/gemp-019/jCardGroup.js"></script>
    <script type="text/javascript" src="js/gemp-019/set20.js"></script>
    <script type="text/javascript" src="js/gemp-019/jCards.js"></script>

    <script type="text/javascript" src="js/gemp-019/hallUi.js"></script>
    <script type="text/javascript" src="js/gemp-019/leagueResultsUi.js"></script>
    <script type="text/javascript" src="js/gemp-019/tournamentResultsUi.js"></script>
    <script type="text/javascript" src="js/gemp-019/statsUi.js"></script>
    <script type="text/javascript" src="js/gemp-019/playerStatsUi.js"></script>
    <script type="text/javascript" src="js/gemp-019/gameHistoryUi.js"></script>
    <script type="text/javascript" src="js/gemp-019/deckBuildingUi.js"></script>
    <script type="text/javascript" src="js/gemp-019/gameUi.js"></script>
    <script type="text/javascript" src="js/gemp-019/gameAnimations.js"></script>
    <script type="text/javascript" src="js/gemp-019/merchantUi.js"></script>

    <script type="text/javascript">
        jQuery.fn.center = function () {
            this.css("position", "absolute");
            this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
            this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
            return this;
        };

        var comm = new GempLotrCommunication("/gemp-lotr-server", function () {
            alert("Unable to contact the server");
        });

        function register() {
            var login = $("#login").val();
            var password = $("#password").val();
            var password2 = $("#password2").val();
            if (password != password2) {
                $(".error").html("Password and Password repeated are different! Try again");
            } else {
                comm.register(login, password, function() {
                    location.href = "/gemp-lotr/hall.html";
                },
                {
                    "0": function() {
                        alert("Unable to connect to server, either server is down or there is a problem" +
                              " with your internet connection");
                    },
                    "400":function() {
                        $(".error").html("Login is invalid. Login must be between 2-10 characters long, and contain only<br/>" +
                                         " english letters, numbers or _ (underscore) and - (dash) characters.");
                    },
                    "409": function() {
                        $(".error").html("User with this login already exists in the system. Try a different one.");
                    },
                    "503": function() {
                        $(".error").html("Server is down for maintenance. Please come at a later time.");
                    }
                });
            }

        }

        function registrationScreen() {
            comm.getRegistrationForm(
                    function(html) {
                        $(".error").html();
                        $(".interaction").html(html);
                        $("#registerButton").button().click(register);
                    });
        }

        function login() {
            var login = $("#login").val();
            var password = $("#password").val();
            comm.login(login, password, function() {
                location.href = "/gemp-lotr/hall.html";
            },
            {
                "0": function() {
                    alert("Unable to connect to server, either server is down or there is a problem" +
                          " with your internet connection");
                },
                "401":function() {
                    $(".error").html("Invalid username or password. Try again.");
                    loginScreen();
                },
                "403": function() {
                    $(".error").html("You have been permanently banned. If you think it was a mistake you can try sending a private message to Merrick_H on <a href='http://lotrtcgwiki.com/forums/'>TLHH forums</a>.");
                    $(".interaction").html("");
                },
                "409": function() {
                    $(".error").html("You have been temporarily banned. You can try logging in at a later time. If you think it was a mistake you can try sending a private message to Merrick_H on <a href='http://lotrtcgwiki.com/forums/'>TLHH forums</a>.");
                    $(".interaction").html("");
                },
                "503": function() {
                    $(".error").html("Server is down for maintenance. Please come at a later time.");
                }
            });
        }

        function loginScreen() {
            $(".interaction").html("");
            $(".interaction").append("Login below, or ");
            var registerButton = $("<div>Register</div>").button();
            registerButton.click(registrationScreen);

            $(".interaction").append(registerButton);
            $(".interaction").append("<br/>Login: <input id='login' type='text'><br/>Password: <input id='password' type='password'><br/>");

            var loginButton = $("<div>Login</div>").button();
            loginButton.click(login);

            $("#password").keypress(function (e) {
                if (e.which == 13) {
                    login();
                    e.preventDefault();
                    return false;
                }
            });

            $(".interaction").append(loginButton);
        }

        $(document).ready(
                function () {
                    comm.getStatus(
                            function(html) {
                                $(".status").append(html);
                            });
                    loginScreen();
                    $(".centerContainer").center();
                });
    </script>

</head>
<body bgcolor="#000000">
<div style="float: left;height: 98%"><img src="images/troll.png" height="98%"/></div>
<div style="float: right;height: 98%"><img src="images/man.png" height="98%"/></div>
<div class="centerContainer">
    <div class="status" style="color:#ffffff;"></div>
    <div class="error" style="color: #ff0000;"></div>
    <div class="interaction" style="color: #ffffff;"></div>
</div>
</body>
</html>
